<template>
	<view class="guide-popup">
		<uni-popup ref="popup" type="bottom" @maskClick="cancel">
			<view class="bd">
				<view class="cause">
					<view class="cause-item" v-for="(item,index) in causes" :key="index">
						<icon :class="['iconfont','icon-'+item.icon]"></icon>
						<text class="txt">{{item.name}}</text>
					</view>
				</view>
				<view class="btns">
					<button type="default" class="btn btn-yes" open-type="getPhoneNumber" @click="close" @getphonenumber="getPhoneNumber" v-if="showPhoneNumber">立即获取以上服务</button>
					<button type="default" class="btn btn-yes" @click="confirm" v-else>立即获取以上服务</button>
					<button type="default" class="btn btn-no" @click="cancel">再考虑一下</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	export default {
		props: {
			// 显示的类型
			tipType: {
				type: [String, Number],
				default: 1
			},
			// 是否显示手机授权按钮
			showPhoneNumber: {
				type: [Boolean],
				default: false
			},
			// 登录账号
			loginAccount: [Object]
		},
		data() {
			return {
				code: null,
				causes_1: [{ icon: 'sync', name: '阅读历史同步' }, { icon: 'consult', name: '海量资料查阅' }, { icon: 'collect', name: '便捷收藏文档' }, { icon: 'service', name: '优质售后服务' }],
				causes_2: [{ icon: 'news', name: '消息提醒' }, { icon: 'activity', name: '活动通知' }, { icon: 'account', name: '账号同步' }, { icon: 'pwd', name: '账号找回' }]
			}
		},
		computed: {
			causes() {
				try {
					return this[`causes_${this.tipType}`]
				} catch (e) {
					return false;
				}
			}
		},
		created() {
			this.init();
		},
		methods: {
			async init() {
				if (this.showPhoneNumber) {
					const [err, res] = await uni.login({ provider: 'weixin' });
					this.code = res.code;
				}
			},
			open() {
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
			confirm() {
				this.close();
				this.$emit('confirm');
			},
			getPhoneNumber(e) {
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					const mid = this.loginAccount && this.loginAccount.mid ? this.loginAccount.mid : null;
					this.$emit('confirmGetPhoneNumber', { parameter: { iv: e.detail.iv, ciphertext: e.detail.encryptedData, code: this.code }, mid: mid });
					this.close();
				} else {
					this.cancel();
				}
			},
			cancel() {
				this.close();
				this.$emit('cancel');
			}
		}
	}
</script>
<style scoped lang="scss">
	.bd {
		padding-bottom: 10rpx;
		background-color: #fff;
	}

	.cause {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 20rpx 0;

		&-item {
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			margin: 30rpx 0;
			flex-basis: 50%;
			font-size: 32rpx;
			color: #111;

			.iconfont {
				margin-right: 16rpx;
				font-size: 40rpx;
				color: #AACAFF;
			}
		}
	}

	.btns {
		display: flex;
		flex-direction: column;
		align-items: center;

		.btn {
			width: 678rpx;
			height: 90rpx;
			padding: 0;
			border-radius: 45rpx;
			background: #E1835B;
			font-size: 36rpx;
			color: #fff;

			&-no {
				background-color: transparent;
				color: #999;
			}
		}
	}

	@font-face {
		font-family: 'iconfont';
		src: url(data:font/ttf;charset=utf-8;base64,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) format('truetype');
	}

	.icon-sync:before {
		content: "\e7f9";
	}

	.icon-consult:before {
		content: "\e7f8";
	}

	.icon-collect:before {
		content: "\e7fa";
	}

	.icon-service:before {
		content: "\e7f7";
	}

	.icon-news:before {
		content: "\e7f3";
	}

	.icon-activity:before {
		content: "\e7f4";
	}

	.icon-account:before {
		content: "\e7f5";
	}

	.icon-pwd:before {
		content: "\e7f6";
	}
</style>
